<template>
  <div ref="microcirculationContent">
    <h3 class="dialog-plate-title">
      <span>结果上传</span>
    </h3>
    <el-button type="primary" @click="insertHOtherCheck()" v-if="type!=='watch'">新增</el-button>
    <el-table :data="tableList" stripe border class="company-table">
      <el-table-column fixed type="index" label="*" sortable align="center" min-width="40"></el-table-column>
      <el-table-column prop="partName" label="甲襞反射部位" sortable  width="180" />
      <el-table-column prop="wxhStateName" label="甲襞反射部位状态" sortable  width="180"/>
      <el-table-column  label="血管形态" sortable min-width="200" >
      <template slot-scope="scope">
          <div v-if="scope.row.booldvesselsFormName&&scope.row.booldvesselsFormName.length>0">
              <el-tag type="warning" v-for="item in scope.row.booldvesselsFormName" :key="item.id" class="mr-1">{{item.name}}</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="booldvesselsFlowName" label="血管流态" sortable min-width="120" />
      <el-table-column prop="weekLoopsName" label="袢周" sortable  width="110" />
      <el-table-column prop="uploadDate" label="上传日期" sortable  width="140">
        <template slot-scope="scope">{{timestampToTime(scope.row.uploadDate,'yyyy-mm-dd hh:mm')}}</template>
      </el-table-column>
      <el-table-column prop="checkUserName" label="上传护士" sortable width="110"></el-table-column>
      <el-table-column fixed="right" label="操作" align="center" min-width="75">
        <template slot-scope="scope">
          <el-button @click="insertUpdateCheck(scope.row)" type="text" size="small">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
   <el-dialog :title="dialog.title" :visible.sync="dialog.open"  width="90%" top="70px" :close-on-clcick-modal="false" class="bodyNopaddingTop">
        <el-form :inline="true" ref='stressM' :model="dialog.formData" label-width="140px" class="demo-ruleForm">
            <el-form-item label="甲襞反射部位" >
                <el-select v-model="dialog.formData.part"  placeholder="请选择" class="width220" :disabled="type==='watch'">
                    <el-option v-for="item in partSelectData" :key="item.code" :label="item.name" :value="Number(item.code)" /></el-select>
                </el-form-item>
                <el-form-item label="甲襞反射部位状态" >
                    <el-select v-model="dialog.formData.wxhState"  placeholder="请选择" class="width220" :disabled="type==='watch'">
                        <el-option v-for="item in wxhStateData" :key="item.code" :label="item.name" :value="Number(item.code)" />
                    </el-select>
                </el-form-item>
                <el-form-item label="血管形态"  >
                    <el-select v-model="dialog.formData.booldvesselsFormName" multiple placeholder="请选择" class="width220" :disabled="type==='watch'">
                        <el-option v-for="item in booldvesselsFormData" :key="item.code" :label="item.name" :value="item.code" />
                    </el-select>
                </el-form-item>
                <el-form-item label="血管流态"  >
                    <el-select v-model="dialog.formData.booldvesselsFlow"  placeholder="请选择" class="width220" :disabled="type==='watch'">
                        <el-option v-for="item in booldvesselsFlowData" :key="item.code" :label="item.name" :value="Number(item.code)" />
                    </el-select>
                </el-form-item>
                <el-form-item label="袢周" >
                    <el-select v-model="dialog.formData.weekLoops"  placeholder="请选择" class="width220" :disabled="type==='watch'">
                        <el-option v-for="item in weekLoopsData" :key="item.code" :label="item.name" :value="Number(item.code)"  />
                    </el-select>
                </el-form-item>
                <el-form-item label="检测前视频：" class="form-item-block">
                  <uploadVideo :videoSrc="dialog.formData.filePath" refName="filePath" @uploadSuccess="uploadSuccess($event,'filePath')" @clearVideo="clearVideo($event,'filePath')" :disabled="type==='watch'"/>
                </el-form-item>
                <el-form-item label="检测后视频：" class="form-item-block ">
                  <uploadVideo :videoSrc="dialog.formData.afterFilePath" refName="afterFilePath" @uploadSuccess="uploadSuccess($event,'filePath')" @clearVideo="clearVideo($event,'afterFilePath')" :disabled="type==='watch'"/>
                </el-form-item>
                <el-form-item label="上传护士" >
                    <el-input v-model="dialog.formData.checkUserName"  class="width220" disabled/>
                </el-form-item>
                <el-form-item label="创建时间" >
                    <el-date-picker v-model="dialog.formData.uploadDate" class="width220"  type="datetime" placeholder="选择日期时间" disabled  format="yyyy-mm-dd hh:mm"/>
                </el-form-item>
                <el-form-item class="form-item-block text-center" v-if="type!=='watch'">
                    <el-button type="primary" @click="submitMicrocirculation" >提交</el-button>
                </el-form-item>
        </el-form>
   </el-dialog>
  </div>
</template>
<script>
import { queryMicrocirculation,insertMicrocirculation,updateMicrocirculation} from "plugins/axios/inquiryRecord.js";
import api from 'plugins/axios/api.js';
/**视频上传*/ 
import uploadVideo from 'views/operationManage/components/uploadVideo.vue';
export default {
  name: "microcirculation",
  components: {
       uploadVideo
  },
  props: {
    bodyRecodeId: {
      type: [String, Number]
    },
    type: {
      type: String
    }
  },
  data() {
    return {
        tableList: [],
        partSelectData:[],/**甲襞反射部位列表 */
        booldvesselsFormData:[],/***血管形态列表 */
        booldvesselsFlowData:[],/***血管流态列表 */
        weekLoopsData:[],/***袢周列表 */
        wxhStateData:[],/***甲襞反射部位状态 */
        dialog:{
          title:'',
          open:false,
          formData:{}
        }
    };
  },
  created() {
      this.initElselects();
  },
  mounted() {},
  methods: {
    init() {
      let self = this;
      self.queryMicrocirculation();
    },
    /**初始化el-select列表*/ 
    initElselects(){
        let self = this;
        api.getCodeDataByCodeType('part').then(res=>{ //甲襞反射部位
             self.partSelectData = res.content;
        });
        api.getCodeDataByCodeType('booldvesselsForm').then(res=>{//血管形态
            self.booldvesselsFormData = res.content;
        });
        api.getCodeDataByCodeType('booldvesselsFlow').then(res=>{//血管流态
            self.booldvesselsFlowData = res.content;
        });
        api.getCodeDataByCodeType('weekLoops').then(res=>{//袢周
            self.weekLoopsData = res.content;
        }); 
        api.getCodeDataByCodeType('wxhState').then(res=>{//甲襞反射部位状态
             self.wxhStateData = res.content;
        }); 
    },
    // 获取结果上传列表
    queryMicrocirculation(cb) {
      let self = this;
       queryMicrocirculation(self.bodyRecodeId).then(res => {
            self.tableList = res.content;
            cb && cb(self.tableList )
        });
      
    },
    /**新增微循环检测*/ 
    insertHOtherCheck(){
       let self = this;
       insertMicrocirculation({bid:self.bodyRecodeId}).then(res=>{
           self.queryMicrocirculation(content=>{
               self.dialog.title="新增微循环检测"
               self.dialog.open=true;
               self.dialog.formData={...content[content.length-1]}
           })
       })
    },
    /**修改微循环检测*/ 
    insertUpdateCheck(row){
        this.dialog.title="修改微循环检测"
        this.dialog.open=true;
        this.dialog.formData={...row}
        this.dialog.formData.booldvesselsFormName= row.booldvesselsFormName&&row.booldvesselsFormName.length>0? row.booldvesselsFormName.map(item=>item.code):[];
    },
    // 视频上传成功
    uploadSuccess(item,type){
       this.dialog.formData[type] =item.url
    },
    // 移除视频
    clearVideo(item,type){
        this.dialog.formData[type] =null
    },
    submitMicrocirculation(){
        let self = this;
        let postData={...self.dialog.formData}
        postData.booldvesselsFormName = postData.booldvesselsFormName.map(item=>{return {code:item}});
        updateMicrocirculation(postData).then(res=>{
            self.dialog.open=false;
            self.$message.success('修改成功')
            self.queryMicrocirculation();
        })
    }
  }
};
</script>
<style scoped>
</style>